<template>
  <div class="siderbar">
    <transition name="siderbar">
      <el-menu class="siderbar-el-menu"
      mode="vertical"
      show-timeout="200"
      background-color="#001529"
      text-color="#A5ACB3"
      active-text-color="#fff"
      v-show="siderBarShow"
      >
        <div class="siderbar-title">
          <h5>分销系统</h5>
        </div>
        <siderBarItem v-for="item in routes" :key="item.name" :basePath="item.path" :item="item"></siderBarItem>
      </el-menu>
    </transition>
  </div>
</template>

<script>
import siderBarItem from './siderbarItem'
import {mapState} from 'vuex'
export default {
  computed: {
    routes () {
      return this.$store.state.showRouterMap
    },
    ...mapState([
      'siderBarShow'
    ])
  },
  data () {
    return {
    }
  },
  components: {
    siderBarItem
  }
}
</script>

<style lang="less" scoped>
.siderbar-enter-active{
  animation: siderbarIn 0.5s;
}
.siderbar-leave-active{
  animation: siderbarOut 0.5s;
}
.siderbar{
  position: fixed;
  height: 100%;
  .siderbar-el-menu:not(.el-menu--collapse){
    width: 250px;
    height: 100%;
    overflow: hidden;
  }
  .siderbar-title{
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0, 40, 77);
    h5{
      width: 150px;
      height: 30px;
      background: #fff;
      line-height: 30px;
    }
  }
}
@keyframes siderbarIn{
  0%{width: 0px;}
  100%{width: 250px;}
}
@keyframes siderbarOut{
  0%{width: 250px;}
  100%{width: 0px;}
}
</style>
